<!-- src: app/app.component.html -->
<section class="mainBody">
  <!-- header -S-->
  <header class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Angular Demos</a>
  </header>
  <!-- header -E-->

  <!--mainBody -S-->
  <div class="panel">
    <!-- navigate -S-->
    <nav>
      <ul class="nav">
        <li>
          <a routerLink="home" routerLinkActive="active">home</a>
        </li>
        <li>
          <a routerLink="charts" routerLinkActive="active">charts</a>
        </li>
        <li>
          <a routerLink="shopping" routerLinkActive="active">shopping car</a>
        </li>
      </ul>
    </nav>
    <!-- navigate -S-->

    <!-- nav-view -S-->
    <div class="router-view">
      <router-outlet></router-outlet>
    </div>
    <!-- nav-view -E-->
  </div>
  <!--mainBody -E-->
</section>


<!--
<div class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <a href="../" class="navbar-brand">小鱼儿</a>

    </div>
    <div class="navbar-collapse collapse" id="navbar-main">
      <ul class="nav navbar-nav">
        <li>
          <a routerLink="lineCharts" routerLinkActive="active">LineCharts</a>
        </li>
        <li>
          <a routerLink="barCharts">BarCharts</a>
        </li>
        &lt;!&ndash; <li>
           <a routerLink="about">about</a>
         </li>&ndash;&gt;
      </ul>
    </div>
  </div>
</div>

<div class="container">
  <router-outlet></router-outlet>
</div>
-->

